<template>
    <div>
        <!-- 头部 -->
        <headerView class="header">
            <template v-slot:center>
                <span class="title">3/<span class="smell">4 </span>法人信息</span>
            </template>
        </headerView>
        <div class="content">
            <div class="name-and-tel">
                <div class="form-box">
                    <div class="lab">
                        <span>法人姓名</span>
                        <input type="text" placeholder="请输入法人真实姓名" v-model="legalPerson">
                    </div>
                    <div class="lab person">
                        <span>法人性别</span>
                        <div @click="changeMan" :class="[sexState ? 'sexShow' : 'person_div']">男</div>
                        <div @click="changeWoman" :class="[!sexState ? 'sexShow' : 'person_div']">女</div>
                    </div>
                    <div class="lab">
                        <span>证件类型</span>
                        <span>居民身份证</span>
                    </div>
                    <div class="lab">
                        <span>法人证件号</span>
                        <input type="text" placeholder="请输入证件号" v-model="CertificateNum" @blur="verifyNum">
                    </div>
                    <!-- 时间选择 -->
                    <div class="lab">
                        <span>有效期</span>
                        <input type="text" placeholder="请选择证件有效期" @click="showTime = true" v-model="time">
                    </div>
                    <van-datetime-picker v-if="showTime" v-model="currentDate" type="date" title="身份证有效期选择"
                        :columns-order="['year', 'month', 'day']" :formatter="formatter" @confirm="timeOk"
                        @cancel="showTime = false" :min-date="minDate" :max-date="maxDate" />

                </div>
            </div>
            <div class="upload_pictures_box">
                <div class="shopOutside">
                    <van-uploader v-model="certificateFront" multiple max-count="1" upload-text="点击上传"
                        preview-size="200px" />
                    <p>证件正面图(国徽面)</p>
                </div>
                <div class="shopOutside">
                    <van-uploader v-model="certificateBack" multiple max-count="1" upload-text="点击上传"
                        preview-size="200px" />
                    <p>证件背面图(照片面)</p>
                </div>
            </div>
            <!-- 下一步按钮 -->
            <div class="btn_box">
                <van-button round class="btn_next" :disabled="checkedState" @click="goNext">下一步</van-button>
            </div>
        </div>
    </div>
</template>

<script>
import { Notify } from "vant";
import headerView from "../../components/headerView.vue";
import { mapMutations } from "vuex";
export default {
    components: { headerView },
    data() {
        return {
            legalPerson: "",  //法人姓名
            sex: "男", // 法人性别
            time: "", // 身份证有效时间
            CertificateNum: "",  // 法人证件号
            certificateFront: [], //证件正面照片
            certificateBack: [], //证件反面照片
            checkedState: false,
            sexState: true,
            currentDate: new Date(),
            minDate: new Date(),
            maxDate: new Date(2100, 10, 1),
            showTime: false // 时间选择框的显示状态
        }
    },
    methods: {
        back() {
            this.$router.go(-1)
        },
        // 时间的选择
        formatter(type, val) {
            if (type === 'year') {
                return val + '年';
            }
            if (type === 'month') {
                return val + '月';
            }
            if (type === 'day') {
                return val + '日';
            }
            return val;
        },
        // 下一步
        ...mapMutations(['shop/setPersonInformation']),
        goNext() {
            let personInformation = {
                legalPerson: this.legalPerson,  //法人姓名
                sex: this.sex, // 法人性别
                time: this.time, // 身份证有效时间
                CertificateNum: this.CertificateNum,  // 法人证件号
                certificateFront: this.certificateFront, //证件正面照片
                certificateBack: this.certificateBack, //证件反面照片
            }
            this['shop/setPersonInformation'](personInformation)
            this.$router.push('/CertificationQualification')
        },
        changeMan() {
            this.sexState = true
            this.sex = '男'
            // console.log(this.sex);
        },
        changeWoman() {
            this.sexState = false
            this.sex = '女'
            // console.log(this.sex);
        },
        // 按下时间选择器确定
        timeOk(val) {
            var datetime = val.getFullYear() + "年" + (val.getMonth() + 1) + "月" + val.getDate() + "日";
            this.time = datetime
            this.showTime = false
        },
        // 身份证号码校验
        verifyNum() {
            var pattern = /\d{17}[\d|x]|\d{15}/
            if (!pattern.test(this.CertificateNum)) {
                Notify({ type: 'danger', message: '证件号格式不正确' });
            }
        }
    }
}
</script>

<style scoped>
input {
    text-indent: 10px
}

/* 头部 */
.header {
    position: fixed;
    top: 0;
    z-index: 99;
}

.smell {
    font-size: 15px;
    color: rgb(187, 186, 186);
}

.title {
    margin: 0 auto;
}


/* 具体内容部分 */
.content {
    padding-top: 10%;
    width: 100%;
    margin: 0 auto;
    background-color: #f7f7f7;
}


/* 负责人手机号码 */
.form-box {
    width: 90%;
    margin: 0 auto;
    padding: 4px 0;
}

.name-and-tel {
    margin: 16px 0;
    width: 100%;
    background-color: #ffff;
}

.lab {
    display: flex;
    align-items: center;
    margin: 10px 0;
    position: relative;
}

.lab span {
    font-size: 14px;
    width: 90px;
    margin-left: 15px;
    color: #646566;
}

.lab input {
    width: 70%;
    border: none;
    background-color: #eae7e7;
    border-radius: 10px;
    padding: 10px 0;
    font-size: 15px;
}

.lab button {
    position: absolute;
    left: 30%;
    border: none;
    font-size: 15px;
    padding: 10px 3.5px;
    background-color: #eae7e7;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
}

#tel-input {
    width: 54%;
    margin-left: 53px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

.sexShow {
    color: #ff6e53;
    background-color: rgb(255, 129, 107, .3);
    border: 1px solid #ff6e53;
    width: 60px;
    border-radius: 10px;
    margin-right: 30px;
    text-align: center;
    padding: 5px 0;
    font-size: 14px;
}

input::placeholder {
    font-size: 14px;
    text-align: left;
    line-height: normal;
    color: #989595;
}

.person_div {
    width: 60px;
    background-color: #f1ebea;
    border: 1px solid #c1bcbb;
    border-radius: 10px;
    margin-right: 30px;
    text-align: center;
    padding: 5px 0;
    font-size: 14px;
}

/* 上传图片 */
.upload_pictures_box {
    width: 100%;
    background-color: #ffff;
    text-align: center;
    padding-bottom: 40px;
}

.shopOutside {
    width: 90%;
    margin: 0 auto;
    padding: 20px 0;
    /* background-color:pink; */
}

.shopOutside p {
    font-size: 13px;
}

/* 下一步按钮 */
.btn_box {
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
    position: fixed;
    bottom: 0;
    z-index: 99;
}

.btn_next {
    width: 100%;
    background-color: #ff6e53;
    text-align: center;
    color: #ffff;
    font-size: 16px;
    margin: 12px 0;
}
</style>